<template>
   
        <!--演示v-show和v-if两者的区别
        两者的区别： v-show是display:none 隐藏标签; v-if是直接移除dom元素 类似于注销
        -->
    <h1 v-show="!isshow">v-show的盒子模型</h1>
    <h1 v-if="isshow">v-if的盒子模型</h1>
    <div>
        {{ age>18 ?'成年了':'未成年' }}
        <p v-if="age>=18">成年了</p>
        <p v-else-if="age>=16">法律成年</p>
        <p v-else> 未成年</p>
    </div>


   <hr><br>
    <p v-text="str"></p>
    <p v-html="str"></p>
    <button @click="strcli">d点击获取</button>
</template>
<script>
export default {
  data() {
        return {
            str: '<span style="color:red"> 你好 vue</span>',
            isshow: true,
            age:17
    };
    },
    methods: {
        strcli() { 
            console.log(this.str);
            
        }
    }
};

</script>